<template>
  <div
    class="jx-content"
    id="player"
  >
    <div v-if="tableData !== ''">
      <div class="fl courseName">
        <el-form
          :inline="true"
          :model="form"
          class="fl"
        >
          <el-form-item label="选手信息">
            <el-input
              clearable
              v-model="form.userInfo"
              placeholder="请输入选手账号/姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input
              clearable
              v-model="form.major"
              placeholder="请输入选手专业"
            ></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input
              clearable
              v-model="form.className"
              placeholder="请输入班级"
            ></el-input>
          </el-form-item>
        </el-form>
        <button
          @click="search"
          class="button-style"
        >搜 索</button>
      </div>
      <div class="btn-group fr">
        <el-form :inline="true">
          <el-form-item>
            <div
              class="button-style"
              @click="add"
            >添加</div>
          </el-form-item>
          <el-form-item>
            <div
              class="button-style"
              @click="deleteFn"
            >批量删除</div>
          </el-form-item>
          <el-form-item>
            <el-upload
              class="avatar-uploader"
              accept=".xls,.xlsx"
              :action="`/tes/student/batch-import`"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-error="handleAvatarError"
              :before-upload="beforeAvatarUpload"
            >
              <div class="button-style">批量导入</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <a href="/tes/tempfiles/学生导入模板.xlsx">
              <i class="">模板下载<b class="iconfont icon-tubiaozhizuo-"></b></i>
            </a>
          </el-form-item>
        </el-form>
      </div>
      <div class="clear"></div>
      <el-table
        class="chapter-info-table"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="选手姓名"
        ></el-table-column>
        <!-- <el-table-column prop="number" label="编号"></el-table-column> -->
        <el-table-column
          prop="userNumber"
          label="账号"
        ></el-table-column>
        <el-table-column
          prop="major"
          label="专业"
        ></el-table-column>
        <el-table-column
          prop="className"
          label="班级"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              @click="getInfo(scope.row)"
              type="text"
              size="small"
            >修改</el-button>
            <el-button
              @click="initCode(scope.row.id)"
              type="text"
              size="small"
            >初始密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        background
        layout="prev, pager, next"
        :total="totalCount"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogAddTitle"
      :visible.sync="dialogAdd"
      width="600px"
      @close="closeDialogAdd"
    >
      <h3 style="text-align: center; margin-bottom: 20px">默认初始密码：000000</h3>
      <el-form
        class="form-add"
        ref="form"
        label-width="100px"
        :model="formAdd"
      >
        <el-form-item
          label="姓名："
          prop="name"
        >
          <el-input
            v-model="formAdd.name"
            maxlength="10"
            show-word-limit
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="手机号："
          prop="name"
        >
          <el-input
            v-model="formAdd.telephoneNumber"
            placeholder="请输入手机号"
          ></el-input>
          注：手机号将作为您的账号使用
        </el-form-item>
        <el-form-item
          label="专业："
          prop="name"
        >
          <el-input
            v-model="formAdd.major"
            maxlength="50"
            show-word-limit
            placeholder="请输入专业"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="班级："
          prop="name"
        >
          <el-input
            v-model="formAdd.className"
            maxlength="50"
            show-word-limit
            placeholder="请输入班级"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        class="footer"
        style="text-align: center"
      >
        <button
          v-if="isUpdate"
          class="button-style saveBtn"
          @click="onUpdate"
        >
          修 改
        </button>
        <button
          v-else
          class="button-style saveBtn"
          @click="onAdd"
        >确 认</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const _ = require("lodash");
export default {
  data() {
    return {
      dialogAddTitle: "",
      isUpdate: false,
      formDelayed: {
        minute: 0,
        number: "",
      },
      courseId: "",
      //搜索
      form: {
        major: "",
        className: "",
        pageNumber: 1,
        pageSize: 10,
        userInfo: "",
      },
      pagesize: 10,
      currentPage: 1,
      totalCount: 0,
      //添加选手
      formAdd: {
        className: "",
        major: "",
        name: "",
        telephoneNumber: "",
        number: "",
      },
      tableData: [],
      dialogAdd: false,
      dialogTime: false,
      multipleSelection: [],
      fileList: [],
    };
  },
  created() {
    this.courseId = this.$localstorage.getLocalStorage("courseId");
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    //上传成功
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.$message.success(res.message);
        this.init();
      } else {
        this.$message.error(res.message);
      }
    },
    //上传失败
    handleAvatarError(res) {
      this.$message.error(res.message);
    },
    //上传之前校验
    beforeAvatarUpload(file) {
      // 获取到文件的后缀以便于判断文件类型
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      // 判断文件类型
      if (extension !== "xlsx" && extension !== "xls") {
        this.$message.warning("只能上传后缀是.xlsx或者.xls的文件");
        return;
      }
    },
    search() {
      this.form.pageNumber = 1;
      this.init();
    },
    //添加关闭清空
    closeDialogAdd() {
      this.formAdd = {
        className: "",
        major: "",
        name: "",
        telephoneNumber: "",
        number: "",
      };
    },

    //删除
    deleteFn(number) {
      //console.log(this.multipleSelection)
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要删除的内容",
          type: "warning",
        });
        return;
      }
      this.$confirm("是否删除选中?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post(`/tes/student/delete`, this.multipleSelection).then(
            (response) => {
              let res = response.data;
              if (res.code == "200") {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.form.pageNumber = 1;
                this.currentPage = 1;
                this.init();
              } else {
                this.$message.error(res.message);
              }
            },
            (err) => {
              console.log("err");
            }
          );
          //this.dialogTips = true
        })
        .catch(() => {});
    },
    //修改回显
    getInfo(row) {
      //   this.formAdd = res.data;
      //   this.formAdd.number = number;
      this.formAdd = row;
      this.dialogAddTitle = "修改选手";
      this.isUpdate = true;
      this.dialogAdd = true;
    },
    //获取列表
    getList() {
      this.$http
        .post(`/tes/student/list`, this.form)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res.data, 2223);
            this.tableData = res.data.records;
            this.totalCount = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改提交
    onUpdate() {
      this.$http
        .post(`/tes/student/update`, this.formAdd)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
            this.dialogAdd = false;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加提交
    onAdd() {
      this.$http
        .post(`/tes/student/add`, this.formAdd)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
            this.dialogAdd = false;
            this.form.pageNumber = 1;
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //分页
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.form.pageNumber = currentPage;
      this.currentPage = currentPage;
      this.init();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.id);
      console.log(this.multipleSelection);
    },

    // 初始化密码
    initCode(id) {
      this.$http
        .put("/tes/user/" + id + "/init-password")
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message({
              message: "初始化成功",
              type: "success",
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    add() {
      this.dialogAddTitle = "添加选手";
      this.isUpdate = false;
      this.dialogAdd = true;
    },
    //数据下载
    downloadFile() {
      this.$http
        .post(
          `/tes/apply/apply-tea/data-download/${this.courseId}`,
          this.form,
          {
            responseType: "blob",
          }
        )
        .then((response) => {
          let contentType = response.headers["content-type"];
          let blob = new Blob([response.data], {
            type: response.headers["content-disposition"],
          });
          let url = window.URL.createObjectURL(blob);
          //let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1];
          let fileName = `数据下载.xls`;
          let downloadElement = document.createElement("a");
          downloadElement.style.display = "none";
          downloadElement.href = url;
          downloadElement.download = fileName; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(url);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss">
#player {
  .form-add {
    .el-input {
      width: auto;
      .el-input__count-inner {
        background: none;
      }
    }
  }
}
.filter-wraper {
  .input-wraper {
    margin-top: 20px;
    .el-input__inner {
      width: auto;
    }
  }
}
.el-tooltip__popper {
  max-width: 30%;
  line-height: 22px;
}
.chapter-info-table .el-switch__core {
  width: 28px;
  height: 16px;
}
.chapter-info-table .el-switch {
  margin-left: 15px;
}
.chapter-info-table .el-switch.is-checked .el-switch__core::after {
  margin-left: -13px;
}
.chapter-info-table .el-switch__core:after {
  width: 12px;
  height: 12px;
}
</style>
<style scoped>
.imgPost {
  vertical-align: inherit;
  position: absolute;
  right: 17px;
  color: rgb(2, 170, 255);
  font-size: 18px;
  padding-top: 5px;
}
.el-button--small:hover {
  color: #1277eb;
}
.el-tree >>> .el-tree-node {
  margin: 6px 0;
}
.el-form-item >>> .el-input__inner {
  width: 200px;
  height: 32px;
  border-radius: 4px;
}
.el-form >>> .el-textarea__inner {
  height: 200px;
  width: 350px;
  resize: none;
}
.el-form-item {
  margin-bottom: 22px;
}
.el-form-item >>> .el-form-item__content {
  height: auto;
}
.block::-webkit-scrollbar {
  width: 2px;
}
.block::-webkit-scrollbar-thumb {
  background: #dededd;
  border-radius: 50px;
}

.chapterTitle {
  width: 390px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.custom-tree-node {
  padding-top: 10px;
}
</style>
<style lang="scss" scoped>
@import "./../../../styles/ypublic.scss";

.downloadfile {
  color: #1277eb;
  cursor: pointer;
  &:hover {
    opacity: 0.9;
  }
}
.jx-content {
  width: 1200px;
  margin: 20px auto;
  .courseName {
    font-size: 18px;
  }
  #topic-models {
    padding: 200px 0;
    .button-center {
      text-align: center;
      .button-style {
        text-align: center;
        height: 48px;
        line-height: 48px;
        border-radius: 48px;
        padding: 0 106px;
        margin: 10px;
      }
    }
  }
  .navBox {
    .reportTemplate {
      padding-bottom: 10px;
      margin-left: 190px;
      cursor: pointer;
    }
    .testTemplate {
      padding-bottom: 10px;
      margin-left: 40px;
      cursor: pointer;
    }
    .templateCheck {
      border-bottom: 2px solid $yBlue;
      color: $yBlue;
      cursor: pointer;
    }
  }
  .block {
    margin: 20px 0;
    overflow-y: scroll;
    height: 483px;
  }
  .saveBtn {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
